<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
//    <!--$(document).ready(-->
//        <!--function(){-->
//            <!--$("button").click(function(){-->
//                <!--$("#div1").load("css/outside");-->
//            }
//        <!--});-->
    $(document).ready(function(){
        console.log("这是一个JQuery入口");
        //元素选择器触发的事件！
        $("button").click(function(){
//            $("#div").hide();
//            //id选择器触发的事件
//            $(".jq").hide();
//            //class选择器
            $(".ycbx").toggle();
            //隐藏和出现
            $("#div1").fadeOut();
            //淡入和淡出
            $(".jq").fadeOut("slow");
        });
//        $("#div1").mouseenter(function(){
//            alert("您的鼠标移到了 id=div1的元素上！");
//        });
    });
    $(function(){console.log("这也是Jquery的入口")});
    window.onload = function(){
        console.log("这是javascript的入口");
    }

</script>
<h2>这是一个标题</h2>
<p class="jq">这是不会隐藏的段落！</p>
<p id="div1">这还是一个段落,鼠标上来会弹窗！</p>
<p class="ycbx">我会随机应变！</p>
<button>点我</button>
<script src="javascripts/demo.js"></script>
</body>
</html>